import {Modal} from "antd";
import React, {useEffect, useRef} from "react";

interface SeeFileType {
    // 是否显示
    isMolFile: boolean,
    // 控制显示
    setIsMolFile: (v: boolean) => void,
    // 类型
    isShow: {
        isVideo: boolean,
        isAudio: boolean
    },
    // 地址
    url: string
}


const ReadFile = React.memo(({isMolFile, setIsMolFile, isShow, url}: SeeFileType) => {
    const videoRef = useRef(null);
    const audioRef = useRef(null);
    const pauseEle = () => {
        if (videoRef.current) {
            const videoEle: HTMLVideoElement = videoRef.current;
            videoEle.pause();
        }
        if (audioRef.current) {
            const audioEle: HTMLAudioElement = audioRef.current;
            audioEle.pause();
        }
    }
    useEffect(() => {
        return () => {
            pauseEle()
        }
    }, [])
    return (
        <Modal className="my-modal" open={isMolFile} onCancel={() => {
            setIsMolFile(false);
            pauseEle()
        }} footer={null}>
            {
                isShow.isVideo ?
                    (<video ref={videoRef} width="90%" height="auto" src={url} controls autoPlay/>)
                    : null
            }
            {
                isShow.isAudio ? (
                    <audio ref={audioRef} style={{width: "90%", height: "40px"}} src={url} controls
                           autoPlay/>
                ) : null
            }
        </Modal>
    )
})

export default ReadFile;